import { View, Image, Text } from '@tarojs/components'

import './index.scss'

const recommendGoods = [
  {
      icon: require('../../../../assets/detailImg/recommendImg/recommend1.png'),
      title: 'XX Mate 40 5G 全网通',
      price: '￥196',
      id: '1'
  },
  {
      icon: require('../../../../assets/detailImg/recommendImg/recommend2.png'),
      title: 'XX手机 大多数人的选择',
      price: '￥339.98',
      id: '2'
  },
  {
      icon: require('../../../../assets/detailImg/recommendImg/recommend3.png'),
      title: 'XX Mate 40 Pro 5G 全网通',
      price: '￥188',
      id: '3'
  },
  {
      icon: require('../../../../assets/detailImg/recommendImg/recommend4.png'),
      title: 'XX Mate 40 5G 全网通',
      price: '￥196',
      id: '4'
  },
  {
      icon: require('../../../../assets/detailImg/recommendImg/recommend5.png'),
      title: 'XX手机 大多数人的选择',
      price: '￥339.98',
      id: '5'
  },
  {
      icon: require('../../../../assets/detailImg/recommendImg/recommend6.png'),
      title: 'XX Mate 40 Pro 5G 全网通',
      price: '￥188',
      id: '6'
  }
]

function Index () {
  return (
    <View className="recommend-container">
      <View className="recommend-header">
        <Text className="recommend-title">旗舰店(48088)</Text>
        <View className="recommend-more-img">
          <Text className="recommend-more">查看全部</Text>
          <Image className="recommend-header-image" src={require('../../../../assets/icons/arrows.png')} mode='aspectFit' />
        </View>
      </View>
      <View className="recommend-box">
        {recommendGoods.map(item => (
          <View className="recommend-box-alone">
            <View className="recommend-img-wrapper">
              <Image className="recommend-img" src={ item.icon } mode='aspectFit' />
            </View>
            <Text className="recommend-good-name">{ item.title }</Text>
            <Text className="recommend-price">{ item.price }</Text>
          </View>
        ))}
      </View>
    </View>
  )
}

export default Index
